<template>
    <div class="myPay myFlex">
        <div class="payingWindow myFlex">
            <el-form style="padding-top: 40px;display: flex;flex-direction: column;align-items: center;width: 100%">

                <div style="width: 80%;height: 50%;background-color: darkgrey;display: flex;flex-direction: column;padding-top: 20px;">
                    <el-form-item label="需支付：" prop="username" class="myFlex">
                        <el-button :type="btnType2">{{total}}元</el-button>
                    </el-form-item>

                    <el-form-item label="将找零：" prop="password" class="myFlex">
                        <el-button :type="btnType2">{{stillNeed}}元</el-button>
                    </el-form-item>
                </div>

                <el-form-item label="已支付：" prop="password" class="myFlex" style="margin-top: 30px">
                    <el-input v-model="curPaid" style="width: 120px"></el-input>
                </el-form-item>

                <div class="myFlex" style="flex-direction: column">
                    <el-form-item label="饮料温度：" class="myFlex">
                        <p>
                            <el-switch
                                    v-model="value1"
                                    inactive-color="gray"
                                    active-text="自设定"
                                    inactive-text="默认"
                            >
                            </el-switch>
                        </p>
                    </el-form-item>

                    <el-form-item>
                        <el-button :type="btnType" v-if="!clicked" @click="clicking" :disabled="enough">
                            {{btnMsg}}
                        </el-button>
                        <el-button type="primary" v-if="clicked" loading>
                            {{btnMsg}}
                        </el-button>
                    </el-form-item>
                </div>

            </el-form>
        </div>
    </div>
</template>

<script>

    export default {
        name: "Paying",
        data(){
            return{
                clicked:false,
                value1: true,
                count:200,//倒计时
                btnMsg:"支付金额不足",
                btnType:"danger",
                curPaid:'',
                stillNeed:0,
                enough:true,
                beverages:[],
                btnType2:'danger',

                cartList:this.$store.state.cart,
                total:0
            }
        },
        created() {
            for(let i in this.cartList){
                this.total += (this.cartList[i].count) * (this.cartList[i].price)
            }
        },
        methods:{
            confirmPay(){
                //生成订单
                let newOrder = new Map()
                let content = new Array()
                /* 先深拷贝一份 */
                let temp = this.cartList
                for(let i in temp){
                    /* 注意，是每个对象进行深拷贝！ */
                    content.push(Object.assign({},temp[i]))
                }
                newOrder.set('content',content)
                newOrder.set('total',this.total)
                let time = new Date()
                newOrder.set('time',time.toLocaleString())
                newOrder.set('paid',parseFloat(this.curPaid))
                newOrder.set('change',this.stillNeed)

                console.log(newOrder)
                this.$store.commit('newOrder',newOrder)

                //清空购物车
                for(let i in this.cartList){
                    this.$store.commit('changeClicked',this.cartList[i].index)
                }
                this.cartList.splice(0,this.cartList.length)
                this.delayA()
            },
            delayA(){
                //延时跳转回首页
                const loading = this.$loading({
                    lock: true,
                    text: '正在 加热 / 制冷 您的饮料，请稍等',
                    spinner: 'el-icon-loading',
                    target:'.myPay',		//指定 target 即可！
                    background: 'rgba(0, 0, 0, 0.7)',
                });

                //延时跳转
                const _this = this
                setTimeout(() => {
                    loading.close();
                    //罩子关闭后要做的事
                    _this.$message({
                        type: 'success',
                        message: '饮料处理已完成！',
                        offset:250,
                        duration:1000
                    });
                    _this.delayB()
                }, 2000);
            },

            delayB(){
                //延时跳转回首页
                const loading = this.$loading({
                    lock: true,
                    text: '支付成功，正在返回',
                    spinner: 'el-icon-loading',
                    target:'.myPay',		//指定 target 即可！
                    background: 'rgba(0, 0, 0, 0.7)',
                });

                //延时跳转
                const _this = this
                setTimeout(() => {
                    loading.close();
                    //罩子关闭后要做的事
                    _this.$router.push('/');
                    _this.$message({
                        type: 'success',
                        message: '支付成功，欢迎下次光临！',
                        offset:250,
                        duration:1000
                    });
                }, 1500);
            },

            clicking(){
                this.clicked = true
                this.btnMsg = "处理中"
                this.btnMsg = "正在跳转回主页"
                this.confirmPay();
            },
        },
        watch:{
            curPaid(){
                this.stillNeed = this.curPaid - this.total;
                if(this.stillNeed >= 0){
                    this.enough = false;
                    this.btnMsg = "确认支付"
                    this.btnType = "primary"
                    this.btnType2 = "success"
                }else {
                    this.stillNeed = 0
                    this.enough = true;
                    this.btnMsg = "支付金额不足"
                    this.btnType = "danger"
                    this.btnType2 = "danger"
                }
            }
        }
    }
</script>

<style scoped>
    .myPay{
        width: 100%;
        height: 85%;
    }

    .myFlex{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .payingWindow{
        width: 45%;
        height: 80%;
        background-color: gainsboro;
        border-radius: 20px;
        opacity: 0.9;
    }

    @media screen and (max-width: 1200px) {
        .payingWindow{
            width: 90%;
            height: 70%;
            background-color: gainsboro;
            border-radius: 20px;
            opacity: 0.9;
        }
    }


    .payPanel{
        margin: 0 auto;
        margin-top: 5%;
        width: 50%;
        height: 70%;
        background-color: gainsboro;
        border-radius: 20px;
        padding-top: 75px;
        opacity: 0.9;
    }
    .el-input{
        width: 200px;
    }
    .inPayPanel{
        margin-top: 3%;
        margin-left: 15%;
        width: 80%;
        height: 80%;
    }
</style>